<template>
  <div class="meterage-manage-detail">
    <el-dialog width="60%" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag
      class="image-progress-detail" append-to-body :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-zhiliangguanli1"></i>
        <span>{{ title }}</span>
      </span>
      <div class="WholeScroll content">
        <el-form :model="formBaseData" ref="formBaseData">
          <el-row>
            <el-col :span="24">
              <el-form-item label="区域名称" prop="areaName" :label-width="formlabelWidth" :rules="[requiredRules('区域名称', 1)]">
                <el-input v-model="formBaseData.areaName" class="form-input" :disabled="detailType == 'check'">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
      <!--    <el-row>
            <el-form-item label="风险排查责任人" :label-width="formlabelWidth">
              <el-col :span="8">
                <el-form-item prop="projectResponsiblePersonId">
                  <el-select class="form-input" v-model="formBaseData.projectResponsiblePersonId" placeholder="请选择项目级责任人"
                    :disabled="detailType == 'check'">
                    <el-option v-for="item in projectResponsiblePersonArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="constructionResponsiblePersonId" label-width="10px">
                  <el-select class="form-input" v-model="formBaseData.constructionResponsiblePersonId" placeholder="请选择施工班组责任人"
                    :disabled="detailType == 'check'">
                    <el-option v-for="item in constructionResponsiblePersonArr" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="workResponsiblePerson" label-width="10px">
                  <el-input size="small" v-model="formBaseData.workResponsiblePerson" placeholder="请输入作业人员责任人" :disabled="detailType == 'check'"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-row>-->
<!--          <el-row>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item label="分包单位" prop="subcontractCompanyId" :label-width="formlabelWidth">-->
<!--                <el-select class="form-input" :disabled="detailType == 'check'" v-model="formBaseData.subcontractCompanyId"-->
<!--                  placeholder="请选择分包单位">-->
<!--                  <el-option v-for="item in subcontractCompanyArr" :key="item.id" :label="item.secondParty" :value="item.id">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
          <el-row>
            <el-col :span="24">
              <el-form-item label="说明" prop="remark" :label-width="formlabelWidth">
                <el-input size="small" v-model="formBaseData.remark" placeholder="" :autosize="{ minRows: 8 }"
                  type="textarea" :disabled="detailType == 'check'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit')">
            <i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkPart from '@/api/buss/checkPart'
import msgUtil from '@/utils/msgUtil'
export default {
  name: `checkPart-detail`,
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      },
    },
  },
  watch: {
    postDetail(value) {
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.formBaseData.sectionId = (value.params && value.params.sectionId) || ''
      this.formBaseData.projectId = (value.params && value.params.projectId) || ''
      this.formBaseData.pid = (value.params && value.params.pid) || '0'
    //  this.getRiskInvestigationUsers(this.formBaseData.sectionId)
      this.getSubcontractCompan(this.formBaseData.sectionId)
      if (this.detailType !== 'build') {
        this.detailId = (value.params && value.params.detailId) || ''
        this.getDetail()
      } else {
        this.detailBaseId = (value.params && value.params.detailId) || ''

      }
    },
  },
  data() {
    return {
      projectResponsiblePersonArr: [],
      constructionResponsiblePersonArr: [],
      subcontractCompanyArr: [],
      title: '检查部位',
      isLoading: false,
      formBaseData: {
        areaName:'',
        projectResponsiblePersonId:'',
        constructionResponsiblePersonId:'',
        workResponsiblePerson:'',
        // subcontractCompanyId:'',
        remark:'',
      },
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      detailBaseId: '',
      activeName: 'first', //
      formShow: false, // 表单展示
      formlabelWidth: '120px', // 表单左侧标题宽度
    }
  },
  methods: {
    getRiskInvestigationUsers(sectionId){
      this.projectResponsiblePersonArr=[]
      this.constructionResponsiblePersonArr=[]
      checkPart.getRiskInvestigationUsers(sectionId).then(res=>{
        if (res.code === 200) {
          this.projectResponsiblePersonArr = res.data
          this.constructionResponsiblePersonArr = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(res => {
        console.log('请求出现错误',res);
        msgUtil.error2('获取风险排查责任人失败!')
      })
    },
    getSubcontractCompan(sectionId){
      this.subcontractCompanyArr=[]
      checkPart.getSubcontractCompan(sectionId).then(res=>{
        if (res.code === 200) {
          this.subcontractCompanyArr = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(res => {
        console.log('请求出现错误',res);
        msgUtil.error2('获取分包单位失败!')
      })
    },
    /**
     * 重置主表数据
     * */
    resetFormData() {
      this.formBaseData = {
        areaName:'',
        projectResponsiblePersonId:'',
        constructionResponsiblePersonId:'',
        workResponsiblePerson:'',
        remark:'',
      }
    },
    /**
     * 获取详情并整理数据
     * */
    getDetail() {
      checkPart.getOne(this.detailId).then(async (res) => {
        if (res.code == 200) {
          let data = res.data
          // 中间进行处理数据 然后赋值
          this.formBaseData = data
        } else {
          this.$messageError(res.data.message)
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
        this.$messageError(this.$route.name + '获取详情请求-请求失败')
      })
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          this.resetFormData()
          this.detailId = ''
          this.detailBaseId = ''
          // 关闭弹窗
          this.formShow = false
          break
        case 'submit':
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              this.isLoading = true
              // 提交详情
              this.submitDetail(() => {
                this.$emit('reloadList')
                this.$notify({
                  title: '检查部位保存成功',
                  type: 'success',
                  duration: 1500
                })
              },true)
            }
          })
          break
      }
    },

    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail (callback) {
      if (this.detailType === 'build') {
        this.isLoading=true
        checkPart.submit(this.formBaseData).then(res => {
          if (res.code === 200) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          }else {
            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      }else{
        this.isLoading=true
        checkPart.resubmit(this.formBaseData).then(res => {
          if (res.code === 200) {
            this.formShow = false
            this.detailId = res.data.id
            if (callback) callback()
          }else {
            msgUtil.error2(res.data.message)
          }
        }).catch((res) => {
          console.log(res)
        }).finally((response) => {
          this.isLoading = false
        })
      }

    },
    requiredRules(name, type) {
      return {
        required: true, message: `${type == 1 ? '请输入' : '请选择'}${name}`, trigger: 'blur'
      }
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  max-height: 550px;
  overflow: auto;
  padding: 20px;
}

.form-input {
  width: 100%;
}
</style>

